<template>
    <el-card>
        <div slot="header">账号信息</div>
        <el-form label-width="120px" :model="form" :rules="rules" ref="form">
            <el-form-item label="账号">
                {{user.username}}
            </el-form-item>
            <el-form-item label="账号级别">
                {{user.level.name}}
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="form.phone"/>
            </el-form-item>
            <el-form-item label="邮箱地址" prop="email">
                <el-input v-model="form.email"/>
            </el-form-item>
            <template v-if="form.modifyPassword">
                <el-form-item label="原密码" prop="password">
                    <el-input v-model="form.password" type="password"/>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="form.newPassword" type="password"/>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="form.confirmPassword" type="password"/>
                </el-form-item>
            </template>
            <el-form-item label="修改密码" v-show="!form.modifyPassword">
                <el-switch v-model="form.modifyPassword"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">保存</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
    export default {
        data() {
            const phone = (rule, value, callback) => {
                console.log({value});
                if (!/^1\d{10}$/.test(value))
                    return callback(new Error('手机号码不正确'));
                callback();
            };
            const email = (rule, value, callback) => {
                if (!/^[a-z0-9]+@[a-z0-9]{2,}\.[a-z]{2,5}$/ig.test(value))
                    return callback(new Error('邮箱地址不正确'));
                callback();
            };
            const password = (rule, value, callback) => {
                if (!this.form.modifyPassword)
                    return callback();
                if (value.length < 6)
                    return callback(new Error('密码最少6位字符'));
                callback();
            };
            const confirmPassword = (rule, value, callback) => {
                if (value !== this.form.newPassword)
                    return callback(new Error('两个密码不一致'));
                callback();
            };
            return {
                form: {
                    modifyPassword: false,
                    password: '',
                    newPassword: '',
                    confirmPassword: '',
                    phone: '',
                    email: '',
                },
                user: {level: {}},
                rules: {
                    phone: {validator: phone, trigger: 'blur'},
                    email: {validator: email, trigger: 'blur'},
                    password: {validator: password, trigger: 'blur'},
                    newPassword: {validator: password, trigger: 'blur'},
                    confirmPassword: {validator: confirmPassword, trigger: 'blur'},
                },
            };
        },
        methods: {
            fetch() {
                this.$http.get('/api/account/edit').then(res => {
                    this.user = res.data;
                    this.form.phone = res.data.phone;
                    this.form.email = res.data.email;
                });
            },
            submit() {
                this.$refs['form'].validate(valid => {
                    if (!valid)
                        return;
                    this.$http.post('/api/account/edit', this.form).then(res => {
                        this.$message.success('成功保存');
                    }).catch(err => {
                        this.$message.error(err.response.data);
                    });
                })
            },
        },
        mounted() {
            this.fetch();
        },
    }
</script>

<style scoped>

</style>